<template>
	<div class="floor">
		<div class="py-container">
			<div class="title clearfix">
				<h3 class="fl">{{ floor.name }}</h3>
				<div class="fr">
					<ul class="nav-tabs clearfix">
						<!--
							需求: floor中nav区域的交互,点击的要高亮显示,没有点击的不高亮显示
							怎么做?
								首先,类名不能写死,需要动态绑定类名
							什么是动态绑定类名?
								类名通过v-bind绑定的就叫动态绑定类名
								v-bind:class=""  这里的 v-bind 可以省略
							怎们做就绑定了类名?
								动态绑定类名有三种写法:
								1. 字符串写法
									:class=" 'active' "
									:class=" myClass "
									字符串写法,在绑定的属性中直接写字符出即可,当让写数据,或者js表达式都行
									例子:
										<li :class=" 'active' + myClass1 " v-for="(nav, index) in floor.navList" :key="index">
											<a href="javascript:;" data-toggle="tab">{{ nav.text }}</a>
										</li>
								2. 数组写法
									:class="['active', 'aaa', 'bbb', myClass1, myClass + myClass1]"
									数组中的成员可以是字符串,也可以是数据,也可以是表达式
									例子:
										<li :class="['active', 'aaa', 'bbb', myClass1, myClass + myClass1]" v-for="(nav, index) in floor.navList" :key="index">
											<a href="javascript:;" data-toggle="tab">{{ nav.text }}</a>
										</li>
								3. 对象写法
									:class="{
										abc: true,  // 属性名是要绑定的类名,属性值只要是true,这个类名就会被应用
										asdf: true,
										[myClass1]: true  // 属性名如果想要使用数据来展示,这个数据需要用中括号包起来
									}"
									右侧属性值,只要保证隐式转化转成布尔值的时候是true,左侧的类名就会应用
									例子:
										<li
											:class="{
												abc: true,
												asdf: true,
												[myClass1]: true,
												active: '我爱你'
											}"
										v-for="(nav, index) in floor.navList" :key="index">
											<a href="javascript:;" data-toggle="tab">{{ nav.text }}</a>
										</li>
							需求: floor中nav区域的交互,点击的要高亮显示,没有点击的不高亮显示
								1. 首先,类名不能写死,需要动态绑定类名
								2. 对象中的属性值,只有点击的那一个才能使true,其他的都的是false
										我们需要记录一下点击的哪一个
										声明一个数据currentIndex,用这个数据来记录点击的下标
										给li绑定点击事件,在点击事件中,给currentIndex赋值
								3. 拿着记录的值 currentIndex 和 循环的下标进行对比
										如果下标相同,证明我点的就是当前的那一个li
								这种解决思路叫参考值思想:
									使用一个第三方变量来记录我们数据,这个记录的值叫参考值
						-->
						<a>记录的下标: {{ currentIndex }}</a>
						<li
							:class="{ active: currentIndex == index }"
							v-for="(nav, index) in floor.navList"
							:key="index"
							@click="currentIndex = index"
						>
							<a href="javascript:;" data-toggle="tab">{{ nav.text }}</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="tab-content">
				<div class="tab-pane">
					<div class="floor-1">
						<div class="blockgary">
							<ul class="jd-list">
								<li v-for="(item, index) in floor.keywords" :key="index">{{ item }}</li>
							</ul>
							<img :src="floor.imgUrl" />
						</div>
						<div class="floorBanner">

							<!--
								数据使用的是 floor.carouselList
								步骤:
								1. 把 ListContainer 组件中的 轮播粘贴过来,把 floor 组件中自己的轮播删掉
										把数据替换掉
								2. Swiper组件没有被注册
										需要注册一下组件,把ListContainer中的注册内容粘贴过来
										同时把引入的css粘贴过来
								3. Swiper 组件使用的 options 选项的数据也粘贴过来

							-->
							<Swiper class="swiper" :options="swiperOption" v-if="floor.carouselList.length">
								<!-- 每个SwiperSlide对应轮播图的一屏 -->
								<SwiperSlide class="item" v-for="s in floor.carouselList" :key="s.id">
									<img :src="s.imgUrl" alt="图片">
								</SwiperSlide>
								<!-- 小圆点区域 -->
								<div class="swiper-pagination" slot="pagination"></div>
								<!-- 左箭头（上一张） -->
								<div class="swiper-button-prev" slot="button-prev"></div>
								<!-- 右箭头（下一张） -->
								<div class="swiper-button-next" slot="button-next"></div>
							</Swiper>

						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[0]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[1]" />
							</div>
						</div>
						<div class="split center">
							<img :src="floor.bigImg" />
						</div>
						<div class="split">
							<span class="floor-x-line"></span>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[2]" />
							</div>
							<div class="floor-conver-pit">
								<img :src="floor.recommendList[3]" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 接口有(使用的mock)
// 静态页面也有
// 发请求，调接口，拿数据
// 拿到数据之后存储到 store 当中
// 然后把 store 中的数据映射到页面进行展示即可
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
	name: 'Floor',
	props: ['floor'],
	components:{Swiper,SwiperSlide},
	data() {
		return {
			swiperOption: {
				slidesPerView: 1, //同时展示几屏
				// spaceBetween: 150, //屏与屏之间的距离
				loop: true, //是否开启循环轮播
				speed:1000, //切换耗时
				autoplay:{
					delay: 2000, //间隔时间
					stopOnLastSlide: false, //到最后一屏的时候，是否停止自动轮播
					disableOnInteraction: false //鼠标点击后是否禁止自动轮播
				},
				// 指定小圆点的位置
				pagination: {
					el: '.swiper-pagination', //小圆点所在容器
					clickable: true //小圆点是否可以点击
				},
				// 左箭头与右箭头
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev'
				}
			},

			// currentIndex 这个值用来用来记录点击nav的下标
			// 默认值给0,为什么? 默认第一个要显示,第一个的下标是0,所以默认值给了个0
			currentIndex: 0,

			// 来个变量存储类名
			myClass: 'active',
			myClass1: 'qwer'
		}
	}
}
</script>

<style lang="less" scoped>
	.floor {
		margin-top: 15px;

		.py-container {
			width: 1200px;
			margin: 0 auto;

			.title {
				.fl {
					float: left;
					color: #c81623;
					font-size: 20px;
					line-height: 30px;
					margin: 9px 0;
					font-weight: 700;
				}

				.fr {
					float: right;

					.nav-tabs {
						margin: 10px 0 0;
						display: inline-block;

						li {
							float: left;
							line-height: 18px;

							a {
								padding-top: 1px;
								font-weight: 400;
								background-color: #fff;

								&::after {
									content: "|";
									padding: 0 10px;
								}
							}

							&:nth-child(7) {
								a {
									&::after {
										content: "";
									}
								}
							}

							&.active {
								a {
									color: #e1251b;
								}
							}
						}
					}
				}
			}

			.tab-content {
				border-top: 2px solid #c81623;
				border-bottom: 1px solid #e4e4e4;

				.tab-pane {
					.floor-1 {
						height: 360px;
						display: flex;

						.blockgary {
							width: 210px;
							height: 100%;
							background: #f7f7f7;

							.jd-list {
								padding: 15px 0;
								overflow: hidden;

								li {
									list-style-type: none;
									float: left;
									width: 40%;
									margin: 0 10px;
									border-bottom: 1px solid #e4e4e4;
									text-align: center;
									line-height: 26px;
								}
							}

							img {
								width: 100%;
							}
						}

						.floorBanner {
							width: 330px;
							height: 100%;
						}

						.split {
							width: 220px;
							height: 100%;
							position: relative;

							.floor-x-line {
								position: absolute;
								background: #e4e4e4;
								width: 220px;
								height: 1px;
								top: 180px;
							}

							.floor-conver-pit {
								width: 100%;
								height: 50%;

								img {
									width: 100%;
									height: 100%;
									transition: all 400ms;

									&:hover {
										opacity: 0.8;
									}
								}
							}
						}

						.center {
							border: 1px solid #e4e4e4;
						}
					}
				}
			}
		}
	}
</style>